<template>
	<view class="container">
		<view style="height: var(--status-bar-height);"></view>
		<view class="top">
			<image @click="back" style="width: 40px;height: 27px;margin-top: 15px;" src="/static/img/search/back.png">
			</image>
			<uni-search-bar style="width: 100%;" @focus="focus" @input="change" @cancel="cancel" placeholder="请输入搜索关键词"
				v-model="Value" bgColor="#EEEEEE" @confirm="search" />
		</view>
		<!-- 提示搜索 -->
		<view v-if="SearchList" style="margin: 0 0 10px 10px;">
			<!-- 判断input获取焦点同时后台给到了数据 -->
			<view class="InputList" v-show="isFocus && SearchList.length">
				<view v-for="item,index in SearchList" :key="index" @click="setValue(item.vodName)" class="listSon">
					{{item.vodName}}
				</view>
			</view>
		</view>
		<!-- 历史搜索 -->
		<view class="searchRecord" v-show="searchRecord.length">
			<view style="display: flex;flex-direction: row;width: 100%;">
				<view style="width: 50%;">
					<text style="font-weight: bold;font-size: 20px;float: left;margin-left: 0px;">历史搜索</text>
				</view>
				<!-- 删除历史搜索记录 -->
				<view style="width: 50%;">
					<image @click="deleteRecord()" style="height: 30px;width: 30px;float: right;margin-right: 0px;"
						src="/static/img/search/delete.png"></image>
				</view>
			</view>
			<!-- 记录块 -->
			<view style="height: auto; width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;">
				<view @click="record(item)" v-for="item,index in searchRecord" :key="index"
					style="margin: 10px;border-radius: 5px;background-color: #e6e6e6;">
					<text style="padding: 10px;">{{item}}</text>
				</view>
			</view>
		</view>
		<!-- 热门搜索 -->
		<view></view>
	</view>
</template>

<script>
	import {
		http
	} from '@/config/common.js'
	export default {
		data() {
			return {
				Value: '', //搜索内容
				isFocus: false, //文字框是否显示
				SearchList: [],
				searchRecord: []
			}
		},
		onShow() {
			this.getSearchRecord();
		},
		methods: {
			cancel() {
				this.isFocus = false;
			},
			change(value) {
				this.Value = value.trim();
				this.getList();
			},
			//获得焦点
			focus() {
				this.isFocus = true;
			},
			getList() { //这一步是获取数据
				http.get('/search/matchingItems', {
					params: {
						searchText: this.Value,
					}
				}).then(res => {
					this.SearchList = res.data.data;
				}).catch(err => {
					console.log(err)
				})
			},
			//点击搜索记录项事件
			record(data){
				this.Value = data;
				this.search();
			},
			//删除搜索记录
			deleteRecord(){
				//清除缓存
				uni.removeStorageSync('search_cache');
				this.searchRecord = [];
			},
			//搜索事件
			search() {
				this.SearchList = [];
				this.isFocus = false;
				let _this = this;
				uni.getStorage({ //从缓存中取搜索历史记录的数组
					key: 'search_cache',
					success(res) { //获取成功
						let list = res.data;
						for (let i in list) { //循环遍历
							if (list[i] == _this.Value) { //如果缓存数组中有搜索关键词
								list.splice(i, 1) //删除数组中的该关键词
							}
						}
						list.unshift(_this.Value); //将搜索关键词添加到数组开头
						list.splice(10) //只保留10个
						uni.setStorage({ //将新的数组存入缓存
							key: 'search_cache',
							data: list,
						});
						//搜索
						uni.navigateTo({
							url: '/pages/search/searchDetail?searchText='+ _this.Value	
						})
					},
					fail() { //没有获取到缓存
						let list = [];
						list.push(_this.Value);
						uni.setStorage({
							key: 'search_cache',
							data: list,
						});
						//搜索
						uni.navigateTo({
							url: '/pages/search/searchDetail?searchText='+ _this.Value	
						})
					}
				})
			},
			setValue(value) { //点击事件 搜索点击这一条
				this.Value = value
				this.SearchList = []
				this.isFocus = false;
				this.search();
				http.get('/search/fuzzySearch', {
					params: {
						searchText: this.Value,
						current: 1,
						size: 10
					}
				}).then(res => {
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			back() {
				uni.navigateBack();
			},
			//搜索历史记录获取
			getSearchRecord: function() {
				let _this = this;
				uni.getStorage({ //从缓存中取搜索历史记录的数组
					key: 'search_cache',
					success(res) { //获取成功
						_this.searchRecord = res.data;
					}
				})

			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.top {
		width: 100%;
		position: sticky;
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #e5e5e5;
	}

	.InputList {
		position: absolute;
		z-index:5555;
		width: 95%;
		height: auto;
		margin-top: -2px;
		border: 1rpx solid #ececec;
		border-radius: 5px;
		background-color: #ffffff;
	}

	.listSon {
		height: 30px;
		line-height: 27px;
		font-size: 16px;
		text-indent: 1em;
	}

	.listSon:nth-of-type(even) {
		background: #f7f7f7;
	}
</style>